<template>
    <div class="buy-bar border-top-1px">
        <!-- <div class="home " @click="turn('/home')">
            <span class="iconfont iconhome1"></span>
            <span class="name">首页</span>
        </div> -->
         <!-- <div class="shop">
            <img src="./image/店铺.png" alt="">
            <span class="name">进店</span>
        </div> -->
        <div class="shop" v-if="shop" @click="toShop(shop.userId)">
            <img src="./image/店铺.png" alt="">
            <span class="name">进店</span>
        </div>
        <div class="shop" v-if="!shop" @click="toShop(0)">
            <img src="./image/店铺.png" alt="">
            <span class="name">进店</span>
        </div>
        <div class="cart">
            <img src="./image/购物.png" @click="turn('/cart')"/>
            <span class="name">购物车</span>
            <span class="quantity" v-if="badge&&badge>0">{{badge}}</span>
        </div>
        <!-- <div class="heart active">
            <span class="iconfont iconheart "></span>
            <span class="name">收藏</span>
        </div> -->
        <div class="btns">
            <div class="add-cart" @click="addCart">加入购物车</div>
            <div v-if="!flag" class="to-buy"  @click="toCommit">立即购买</div>
            <div v-else class="to-buy"  @click="toCommit">可预订购买</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        props:{
            badge:Number,
            flag:Boolean,
            shop:Object
        },
        methods:{
            turn(path){
                this.$router.push(path)
            },
            addCart(){
                this.$emit('addCart')
            },
            toCommit(){
                this.$emit('toCommit')
            },
            toShop(id){
                this.$router.push({
                    path:`/shop/list?uid=${id}`
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
    .buy-bar
        border-top-color $font-color-light
        position fixed
        left 0
        right 0
        bottom 0
        height 44px
        background-color white
        padding 0 10px
        display flex
        align-items center
        justify-content space-between
        .cart
            position relative
            .quantity
                text-align right
                position absolute
                top -5px
                right -8px
                background-color red
                color white
                line-height 8px
                border-radius 5px
                padding 2px 4px
                font-size 8px
        .cart
            &:active
                color #00A398
        .shop,.cart
            display flex
            align-items center
            flex-direction column
            justify-content space-around
            margin-left 0.27rem
            img
                display inline-block
                widh: 22px;
                height 22px
            .name
                line-height 8px
                margin-top 2px
                font-size 8px
                color #B1B1B1

        .btns
            display flex
            height 35px
            width 260px
            overflow hidden
            .add-cart,.to-buy
                width 50%
                color white
                font-size 12px
                text-align center
                line-height 35px
            .add-cart
                background-color #FFB760
                border-top-left-radius 20px
                border-bottom-left-radius 20px
            .to-buy
                background-color #00D6C0
                border-bottom-right-radius 20px
                border-top-right-radius 20px


</style>
